
        var map;
        var geocoder;
        var address;
        var trafficInfo;
        var toggleState = 1;
        var addressMarker = null;
        var animating = false;

        var globalTime=0;
        var timeStep = 50;
	var scheduledCheck;
	var target; //slider

	%s


        function createMarker(point,html) {
            var marker = new GMarker(point); GEvent.addListener(marker, "click",
	    function() {
	      marker.openInfoWindowHtml(html);
	    });

	    // The new marker "mouseover" listener
	    GEvent.addListener(marker,"mouseover", function() {
	      marker.openInfoWindowHtml(html);
	    });

	    // The new marker "mouseout" listener
	    GEvent.addListener(marker,"mouseout", function() {
	      marker.closeInfoWindow();
	    });

	    return marker;
	      }



	function getAddress(overlay, latlng) {
	  if (latlng != null) {
	    address = latlng;
            geocoder.getLocations(latlng, showAddress);
	  }
	}



	function showAddress(response) {
          if (addressMarker != null) {
            map.removeOverlay(addressMarker);
          }
          if (!response || response.Status.code != 200) {
	    alert("Status Code:" + response.Status.code);
	  }
          else {
	    place = response.Placemark[0];
            point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
            addressMarker = new GMarker(point, {draggable: true, bouncy: true} );
            map.addOverlay(addressMarker);

            var htmlToDisplay =  '<div class="bubble"'+
		'<b>Click lat, lng: </b>' + response.name + '<br/>' +
                '<b>Address: </b><i>' + place.address + '</i><br>' +
                '<b>Projected lat, lng: </b>' + place.Point.coordinates[1] + ", " + place.Point.coordinates[0] + '<br>' +
		'<b>Status Code: </b>' + response.Status.code + ' ' + '<b>Status Request: </b>' + response.Status.request +
                ' ' + '<b>Accuracy: </b>' + place.AddressDetails.Accuracy + ' ' +
                '<b>Country code: </b> ' + place.AddressDetails.Country.CountryNameCode+'</div>';

            GEvent.addListener(addressMarker, "dragstart", function() {
              map.closeInfoWindow();
            });

            GEvent.addListener(addressMarker, "dragend", function() {
              addressMarker.openInfoWindowHtml(htmlToDisplay);
            });

            addressMarker.openInfoWindowHtml(htmlToDisplay);



	  }
	}


        function toggleTraffic() {
            if (toggleState == 1) {
              map.removeOverlay(trafficInfo);
              toggleState = 0;
            } else {
              map.addOverlay(trafficInfo);
              toggleState = 1;
            }
          }


       function getTrafficState() {
      	if (toggleState) {
      		return "On";
      		}
      	else {
      		return "Off";
      		}
      	}

function stepForward() {
		// current slider value
		var currentValue = parseInt(document.target.slider('option','value'));

		// current slider value increased by 1
		var newValue = currentValue+1;

		// is new value greater than max value?
                if(newValue <= document.target.slider('option', 'max')) {
			// increase slider value
			document.target.slider('option', 'value', newValue);
			globalTime = newValue;
			displayPlayers(newValue);
			//map.setZoom(newValue);
		} else {
			// slider is at max value
			document.target.slider('option', 'value', document.target.slider('option', 'max'));
			globalTime = document.target.slider('option', 'max');
			displayPlayers(globalTime);

		}
		return false;
	}

	function stepBackward() {
			// current slider value
			var currentValue = parseInt(document.target.slider('option','value'));

			// current slider value increased by 1
			var newValue = currentValue-1;

			// is new value greater than max value?
			if(newValue >= document.target.slider('option', 'min')) {
				// increase slider value
				document.target.slider('option', 'value', newValue);
				globalTime = newValue;
				displayPlayers(newValue);
				//map.setZoom(newValue);
			}
			else{
				document.target.slider('option', 'value', document.target.slider('option', 'min'));
				globalTime = document.target.slider('option', 'min');
				displayPlayers(globalTime);
			}
			return false;
	}

       // main entry point
       $(document).ready(function() {

       		// bind keys to actions
          shortcut.add("right", stepForward);
          shortcut.add("left", stepBackward);
          shortcut.add("up", increaseSpeed);
          shortcut.add("down", decreaseSpeed);
          shortcut.add("space", playClick);
          shortcut.add("Ctrl+s", stopClick);


	  if (GBrowserIsCompatible()) {
	    map = new GMap2(document.getElementById("map_canvas"));

	    var sw = new GLatLng(%s, %s);
	    var ne = new GLatLng(%s, %s);

	    var bounds = new GLatLngBounds(sw, ne);

            // set map to optimal zoom and center
	    map.setCenter(new GLatLng(%s, %s), map.getBoundsZoomLevel(bounds));
            //map.setMapType(G_HYBRID_MAP);
            map.setMapType(G_SATELLITE_MAP);

            // sets the map to "animate" zoom (only on double click and mouse wheel scroll)
	    map.enableContinuousZoom();
	    // enable the ability to zoom via mouse wheel
	    map.enableScrollWheelZoom();


            map.addControl(new GLargeMapControl());

            map.addControl(new google.maps.LocalSearch(), new  GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(3,0)));
	    GSearch.setOnLoadCallback();

            map.addControl(new ExtMapTypeControl({showTraffic: true, showTrafficKey: true}));

            // ======================================================

	    GEvent.addListener(map, "click", getAddress); geocoder = new
	    GClientGeocoder();


            // show CTF flag positions
            var flagNorth = new GLatLng(43.12703, -77.62932);
            var flagSouth = new GLatLng(43.12475, -77.62980);

            var basic = new GIcon(G_DEFAULT_ICON);
            //basic.shadow = "http://chart.apis.google.com/chart?chst=d_map_pin_shadow";
            basic.shadow = null;
            basic.iconSize = new GSize(25, 25);
            basic.iconAnchor = new GPoint(12, 12);
            //basic.shadowSize = new GSize(34, 25);
            basic.infoWindowAnchor = new GPoint(9, 10);

            var i1 = new GIcon(basic);
            //i1.image = "http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=snow|FFFFFF";
            i1.image = "img/casetta_green.png";
            var i2 = new GIcon(basic);
            i2.image = "img/casetta_yellow.png";

            var markerNorth = new GMarker(flagNorth, {icon: i1, draggable: false, bouncy: false});
            var markerSouth = new GMarker(flagSouth, {icon: i2, draggable: false, bouncy: false});


            GEvent.addListener(markerNorth,"mouseover", function() {
	      markerNorth.openInfoWindowHtml('<div class="bubble">North Flag</div>');
	    });
    	    GEvent.addListener(markerNorth,"mouseout", function() {
	      markerNorth.closeInfoWindow();
	    });

            GEvent.addListener(markerSouth,"mouseover", function() {
	      markerSouth.openInfoWindowHtml('<div class="bubble">South Flag</div>');
	    });
    	    GEvent.addListener(markerSouth,"mouseout", function() {
	      markerSouth.closeInfoWindow();
	    });

            map.addOverlay(markerNorth);
            map.addOverlay(markerSouth);

	   // slider
	$(function() {
			// slider document.target
			document.target = $('#zoom-slider #zoom-path');

			// create the slider
			document.target.slider({
				orientation: 	'horizontal',
				value: 			0,
				min: 			0,
				max: 			lengthTime,
				step: 			1,
				animate: 		false,
				stop: function() {
					sliderBarClick(document.target.slider('option','value'));
					}
			});

			// update slider on zoom with double click
			//GEvent.addListener(map, 'moveend', function() { document.target.slider('option','value', map.getZoom()); });

			// maximum slider value
			var maxValue = parseInt(document.target.slider('option', 'max'));

			// minimum slider value
			var minValue = parseInt(document.target.slider('option', 'min'));

			// hook increase zoom control
			$('#zoom-control-plus').click(stepForward);

			// hook decrease zoom control
			$('#zoom-control-minus').click(stepBackward);
		});


	    prepareMarkers();

	  }
	});


    function prepareMarkers() {

   		%s

	}



    function displayPlayers(t) {
    		// read delay input field
    		timeStep = parseInt(document.getElementById('delayBox').value);


    		if (t > lengthTime || t<0) {
    			return;
    		}

            	text = Math.floor(t/60)+":"+t %% 60+" ("+t+")";
            	document.getElementById("timeBox").value = text;
            	document.target.slider('option', 'value', t);
            	for(i=0; i<numPlayers; i++) {
		            	playerMarks[i].setLatLng(new google.maps.LatLng(points[i][t][0], points[i][t][1]));
		}
	    }



    function sliderBarClick(t) {
	globalTime = t;

    	if (paused == false) {
        	if (scheduledCheck != null) {
	    		clearTimeout(scheduledCheck);
		}
		document.getElementById('pauseButton').src="themes/default/images/pause_b.png";
      		document.getElementById('playButton').src="themes/default/images/play.png";
     		document.getElementById('stopButton').src="themes/default/images/stop.png";
     		paused = true;
        }

        displayPlayers(t);

     }


    function changeAnimation(newTime) {
    	//cancel outstanding scheduled event
    	if (scheduledCheck != null) {
	    	clearTimeout(scheduledCheck);
	}
    	globalTime = newTime;
    	animatePlayers();
    }

    function increaseSpeed() {
    	currTime = parseInt(document.getElementById('delayBox').value);
    	newTime = currTime - 2;
    	if (newTime > 0) {
	    	timeStep = newTime;
	    	document.getElementById('delayBox').value = newTime;
	}
    }

    function decreaseSpeed() {
    	currTime = parseInt(document.getElementById('delayBox').value);
    	newTime = currTime + 2;
    	timeStep = newTime;
	document.getElementById('delayBox').value = newTime;
    }


    function animatePlayers() {
                displayPlayers(globalTime);
                if (globalTime > lengthTime || globalTime<0) {
    			return;
    		}
            	globalTime += 1;
	        //schedule another time step
	    	scheduledCheck = setTimeout("animatePlayers()",timeStep);
    }





      function playClick() {
      	if (paused == false && stopped==false) {
      		// pause
      		if (scheduledCheck != null) {
	    		clearTimeout(scheduledCheck);
		}
      		document.getElementById('pauseButton').src="themes/default/images/pause_b.png";
      		document.getElementById('playButton').src="themes/default/images/play.png";
     		document.getElementById('stopButton').src="themes/default/images/stop.png";
     		paused = true;
      		return;
      	}
      	animatePlayers();
      	document.getElementById('playButton').src="themes/default/images/play_b.png";
      	document.getElementById('pauseButton').src="themes/default/images/pause.png";
      	document.getElementById('stopButton').src="themes/default/images/stop.png";
        paused = false;
        stopped = false;
      }



      function pauseClick() {
      	if (stopped==true){ return; }
        if (paused == false) {
        	if (scheduledCheck != null) {
	    		clearTimeout(scheduledCheck);
		}
		document.getElementById('pauseButton').src="themes/default/images/pause_b.png";
      		document.getElementById('playButton').src="themes/default/images/play.png";
     		document.getElementById('stopButton').src="themes/default/images/stop.png";
     		paused = true;


        }
        else { // paused => unpause
        	changeAnimation(globalTime);
	        document.getElementById('pauseButton').src="themes/default/images/pause.png";
	        document.getElementById('playButton').src="themes/default/images/play_b.png";
	        paused = false;
        }

      }

      function stopClick() {
        if (scheduledCheck != null) {
	    	clearTimeout(scheduledCheck);
	}
	globalTime = 0;
	document.getElementById("timeBox").value = "00:00 (0)";
	document.target.slider('option', 'value', 0);
     	document.getElementById('stopButton').src="themes/default/images/stop_b.png";
     	document.getElementById('playButton').src="themes/default/images/play.png";
     	document.getElementById('pauseButton').src="themes/default/images/pause.png";
        paused = false;
        stopped = true;

       }



